<template>
  <div class="app-container">
    <el-card v-loading="loading">
      <div slot="header">
        <el-button type="primary" @click="resetForm()">返回</el-button>
      </div>
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="退库时间" prop="">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.returnTime" type="date" placeholder="领用时间"> </el-date-picker>
        </el-form-item>
        <el-form-item label="专业类别" prop="">
          <el-select clearable v-model="formData.professCate" filterable placeholder="专业类别">
            <el-option v-for="item in professCates" :key="item.id" :label="item.valueOne" :value="item.valueOne">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领用单位" prop="">
          <el-select clearable v-model="formData.receiveUnit" filterable placeholder="领用单位">
            <el-option v-for="item in receiveUnits" :key="item.id" :label="item.valueOne" :value="item.valueOne">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称" prop="">
          <el-select clearable v-model="formData.projectName" filterable placeholder="项目名称" @change="changeProjectNameF">
            <el-option v-for="item in projectNames" :key="item.id" :label="item.valueOne" :value="item.valueOne">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位项目名称" prop="">
          <el-select clearable v-model="formData.unitEngName" filterable placeholder="单位工程名称">
            <el-option v-for="item in unitEngineNames" :key="item.id" :label="item.valueTwo" :value="item.valueTwo">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领用批次" prop="">
          <el-input v-model="formData.receiveBatch" placeholder="领用批次" />
        </el-form-item>
        <el-form-item label="退库批次" prop="">
          <el-input v-model="formData.returnBatch" placeholder="退库批次" />
        </el-form-item>
        <el-form-item label="使用地点" prop="">
          <el-input v-model="formData.useAddress" placeholder="使用地点" />
        </el-form-item>
        <el-form-item label="退库部门" prop="">
          <el-input v-model="formData.returnDepart" placeholder="退库部门" />
        </el-form-item>
        <el-form-item label="仓库" prop="">
          <el-select clearable v-model="formData.repositoryId" filterable placeholder="仓库">
            <el-option v-for="item in warehouseList" :key="item.value" :label="item.repositoryName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="">
          <el-input type="textarea" v-model="formData.remark" placeholder="备注" />
        </el-form-item>
       <div v-if="formData.materailDTOS.length"
                      v-for="(item,index) in formData.materailDTOS" :key="index">
                    <div style="display: flex;">
                      <el-form-item prop="materailBasicInfoId" label="物料编号,描述">

                          <el-select clearable v-model="item.materailBasicInfoId" filterable
                                    remote
                                    reserve-keyword
                                    :remote-method="queryMaterail"
                                    :loading="loading" placeholder="请输入物料描述">
                            <el-option
                              v-for="item1 in materiaOptions"
                              :key="item1.value"
                              :label="item1.materialNumber+'---'+item1.materialName"
                              :value="item1.id">
                            </el-option>
                          </el-select>

                      </el-form-item>

                      <el-form-item prop="projectText" label="数量">

                          <el-input style="width: 100%;'" v-model="item.purchaseQuantity" type="number" :rows="5"/>

                      </el-form-item>

                      <el-form-item label="工厂非限制库存" prop="notLimitStock">

                          <el-input style="width: 100%;'" type="number" placeholder="工厂非限制库存" v-model="item.notLimitStock"/>

                      </el-form-item>
                      <el-form-item label="单价" prop="singlePrice">

                          <el-input  style="width: 100%;'" placeholder="单价" v-model="item.singlePrice"/>

                      </el-form-item>
                        <div>
                          <el-button v-if="formData.statusName == '新建'" @click="deleLine(index)" type="medium " size="" icon="el-icon-add">删除</el-button>
                        </div>
                    </div>
                  </div>
        <el-form-item v-if="formData.statusName == '新建'">
          <el-button @click="submitLine" type="primary" icon="el-icon-add">添加物料</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">关闭</el-button>
          <el-button :loading="isAdd" type="primary" @click="submitForm('ruleForm')">
            <span v-if="isAdd">提交中...</span>
            <span v-else>提交</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog :visible.sync="visible" append-to-body width="33%">
      <p class="map">物料编号</p>
      <el-select clearable v-model="materailInfoValue" filterable
                 remote
                 reserve-keyword
                 :remote-method="queryMaterail"
                 :loading="loading" placeholder="请输入物料描述">
        <el-option
          v-for="item in materiaOptions"
          :key="item.value"
          :label="item.materialNumber+'---'+item.materialName"
          :value="item.id">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button class="global-button" round type="primary" @click="submitLine">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMaterialAll } from '@/api/purchase.js'
import { getWarehouseList} from '@/api/materialScience/warehousingApplication.js'
import { applyReturnStockDetail, applyReturnStock, modifyApplyReturnStock } from '@/api/materialScience/stockReturn.js'
import {listAllDict} from '@/api/materialScience/materailDict.js'
let $this = null
export default {
  name: 'submitForm',
  props: {
    subData: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      loading: false,
      isAdd: false,
      formData: {
        materailDTOS: [],
        statusName: "新建",
      },
      queryInfo: {
        pageNo: 1,
        pageSize: 25,
        materialName: ""

      },
      rules: {},
      warehouseList: [],
      materiaOptions: [],
      materailInfoValue: null,
      visible: false,
      professCates: [],
      receiveUnits: [],
      projectNames: [],
      unitEngineNames: [],
    }
  },
  created () {
    $this = this
    this.init()
    if ($this.subData.btnId == 1) {
      return $this.applyReturnStockDetail()
    }
  },
  methods: {
     queryMaterail(queryWord) {
        this.materiaOptions = []
        this.queryInfo.materialName = queryWord
        getMaterialAll(this.queryInfo).then(res => {
          this.materiaOptions = res.data.data.records && res.data.data.records
        })
      },
    changeProjectNameF(){
      const valueOne=this.formData.projectName;

      const querys={
        type:3,
        valueOne:valueOne
      }
      $this.unitEngineNames=[]
      $this.formData.unitEngName=''
      listAllDict(querys).then(res=>{

        $this.unitEngineNames=res.data.data

      })

    },
    init () {
      getWarehouseList().then(res => {
        this.warehouseList = res.data.data
      })
      // getMaterialAll().then(res => {
      //   this.materiaOptions = res.data.data && res.data.data
      // })
      listAllDict().then(res => {

        const list=res.data.data;
        list.forEach(d=>{

          if(d.type.code==1){
            $this.professCates.push(d)
          }
          if(d.type.code==2){
            $this.receiveUnits.push(d)
          }
          if(d.type.code==3){
            let flag=true;
            $this.projectNames.forEach(p=>{

              if (p.valueOne==d.valueOne){
                flag=false;
              }

            })
            if (flag){
              $this.projectNames.push(d)
            }
          }

        })

      })
    },
    deleLine (index) {
      this.formData.materailDTOS.splice(index,1)
    },
    submitLine () {
      // if(!this.materailInfoValue) {
      //   this.$message.warning("请选择物料编号")
      //   return
      // }
      this.visible = false
      this.formData.materailDTOS.push({
        materailBasicInfoId: this.materailInfoValue,
        actualQut: null,
        planQut: null,

      })
      this.materailInfoValue = null
    },
    // 详情
    applyReturnStockDetail () {
      $this.loading = true
      applyReturnStockDetail($this.subData.id).then(res => {
        $this.loading = false
        if (res.data.code != 200) {
          return $this.$message.error(res.data.message)
        }
        $this.formData = res.data.data
        this.formData.statusName = res.data.data.status.name
      }).catch(err => { $this.loading = false })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return $this.$message.error('请完善表单信息')
        }
        if ($this.subData.btnId == 0) {
          $this.isAdd = true
          applyReturnStock($this.formData).then(res => {
            $this.isAdd = false
            if (res.data.code != 200) {
              return $this.$message.error(res.data.message)
            }
            $this.$emit('refresh')
          }).catch(err => { $this.isAdd = false })
        }
        if ($this.subData.btnId == 1) {
          $this.isAdd = true
          modifyApplyReturnStock($this.formData).then(res => {
            $this.isAdd = false
            if (res.data.code != 200) {
              return $this.$message.error(res.data.message)
            }
            $this.$emit('refresh')
          }).catch(err => { $this.isAdd = false })
        }
      })
    },
    resetForm () {
      $this.$emit('closeView')
    }
  }
}
</script>

<style scoped lang="scss">
  .el-input {
    width: 500px;
  }
</style>
